<template>
  <div class="container white_bgc">
    <div class="cls_lie limitActive">
      <Headerchunk :headinfo="parentHeadinfo.headinfo"></Headerchunk>
      <ul class="cls_list">
        <li v-for="(item,index) in parentHeadinfo.course.classList" :key="index">
          <router-link :to="{name:'index'}" class="con">
            <img :src="item.imgurl" alt="" />
            <div class="topic_con_txt"><span>{{item.classname}}</span></div>
          </router-link>
        </li>
      </ul>
      <ul class="cls_more_class">
        <li v-for="(item,index) in parentHeadinfo.course.classMoreList" :key="index">
          <router-link :to="{name:'index'}">
            <p><img :src="item.imgurl" alt="" /></p>
            <span>{{ item.classname }}</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Headerchunk from '@/components/common/Headerchunk'
export default{
  props:['parentHeadinfo'],
  data(){
    return{}
  },
  components:{
    Headerchunk
  }
}
</script>
<style lang="scss">
.cls_more_class{
  margin:8px 0 0 1px;
  width:100%;
  padding:0 5px;
  
  &:after,&:before{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  li{
    width:50%;
    float: left;
    border: 1px solid #eee;
    margin:0 -1px -1px 0;

    a{
      position: relative;
      height:4rem;
      font-size: 1rem;
      display: block;
      color: #666;
      overflow: hidden;

      span{
        display: block;
        margin:0 6rem 0 0;
        line-height: 4rem;
        font-size:1.3rem;
        color: #333;
        text-align: center;
      }
      p{
        width:2rem;
        margin-top: .5rem;
        position: absolute;
        top: .5rem;
        right:2.3rem;

        img{
          width:100%;
        }
      }
    }  
  }
}
</style>